<template>
  <div class="bankCardListContainer">
    <div class="bankCardListTop">
      <img src="@/assets/back.png" alt="" @click="()=>{router.go(-1)}">
      <p class="pageName">Chọn tài khoản</p>
      <div class="customer"></div>
    </div>
    <div class="tip">
      <img src="@/assets/tipIcon2.png" alt="">
      <p class="tipContent">
        Chọn một ngân hàng
      </p>
    </div>

    <div class="bankCardListWapper">
      <div class="bankCardListContent">
        <div v-for="(card, index) in bankList" :key="index" class="bankCardItem" @click="() => changeCard(index)">
          <template v-if="index == 1">
            <img class="cardItemBg" src="@/assets/card1bg.png" alt="">
          </template>
          <template v-else-if="index == 2">
            <img class="cardItemBg" src="@/assets/card2bg.png" alt="">
          </template>
          <template v-else>
            <img class="cardItemBg" src="@/assets/card3bg.png" alt="">
          </template>

          <div class="bankCardItemContent">
            <p class="bankName">{{ card.accBkName }}</p>
            <div class="bankCardNumAndIsSelected">
              <div class="bankCardNum">{{ formatString(card.accBkNo) }}</div>
              <template v-if="card.accBkSelect == '0'">
                <img class="cardIsSelected" src="@/assets/cardSelected.png" alt="">
              </template>
              <template v-else>
                <img class="cardIsSelected" src="@/assets/cardNoSelected.png" alt="">
              </template>

            </div>
          </div>
        </div>
      </div>

      <div class="addBankCardArea" v-if="bankList.length < 3" @click="addBankCardHandler">
        <img src="@/assets/addBankCardIcon.png" alt="">
        <p class="addDesc">
          Thêm tài khoản ngân hàng
        </p>
      </div>

      <p class="bankCardCountTip" v-if="bankList.length >= 3">
        Bạn có thể có tối đa 3 tài khoản ngân hàng. Nếu các tài khoản ngân hàng khác không có sẵn và cần thay đổi, vui
        lòng liên hệ với bộ phận dịch vụ khách hàng
      </p>

      <div class="changeBankCardBtn" @click="saveDefalutBankCard">
        Xác nhận
      </div>

    </div>
  </div>
</template>

<script setup lang='ts'>
import api, { type BankCardModel } from '@/api';
import { getItem } from '@/utils/token-utils';
import { formatString } from '@/utils/toolsUtils';
import { Toast } from 'tdesign-mobile-vue';
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';

let router = useRouter()

let bankList = ref<Array<BankCardModel>>([])

const changeCard = (currenIndex: number) => {
  bankList.value = bankList.value.map((card: BankCardModel, index: number) => {
    if (currenIndex == index) {
      card.accBkSelect = '0'
    } else {
      card.accBkSelect = '1'
    }
    return card
  })
}

const addBankCardHandler = ()=>{
  router.replace({
    path:'/addOrEditBankCard'
  })
} 
const changeCircularInfoHandler =async (bankCardId:string)=>{
    try {
        let changeRes = (await api.changeCircularInfo({
            uuid:getItem('uuid'),
            token:getItem('token'),
            bkid:bankCardId
        })).data
        if (changeRes.code!=0) {
            Toast({
                message:changeRes.message,
                duration:3*1000
            })
        }
    } catch (error) {
        console.log(error);
        
    }
}

const saveDefalutBankCard =async ()=>{
  try {
    if (bankList.value.length==0) {
      Toast({
        message:'Không chọn thẻ ngân hàng',
        duration:3*1000
      })
      return;
    }

    let currentSelectedCard = bankList.value.filter((card,index)=>{
      return card.accBkSelect=='0'
    })[0]
    let saveRes = (await api.saveSelectedDefaultBanCard({
      uuid:getItem('uuid'),
      toeken:getItem('token'),
      accBkId:currentSelectedCard.accBkId,
    })).data

    if (saveRes.code==0) {
      changeCircularInfoHandler(currentSelectedCard.accBkId)
    }
    
    if (saveRes.code!=0) {
      Toast({
        message:saveRes.message,
        duration:3*1000
      })
    }
    
  } catch (error) {
    console.log(error);
    
  }
}


const getBankCardListHandler = async () => {
  try {
    let bankCardListres = (await api.getBankCardListData({
      uuid: getItem('uuid'),
      token: getItem('token')
    })).data
    if (bankCardListres.code == 0) {

      bankList.value = bankCardListres.data
    }else{
      Toast({
        message:bankCardListres.message,
        duration:3*1000
      })
    }
  } catch (error) {
    console.log(error);

  }
}

onMounted(() => {
  getBankCardListHandler()
})
</script>

<style lang="less" scoped>
.bankCardListContainer {
  height: 100%;
  background-color: #fff;
  padding: 0 .8rem;
  overflow: hidden;

  .bankCardListTop {
    min-height: 2.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>img {
      display: block;
      width: 1.2rem;
      height: 1.2rem;

    }

    .pageName {
      font-family: SF Pro, SF Pro;
      font-weight: 600;
      font-size: .9rem;
      color: #292B33;
      line-height: 1.3rem;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .customer {
      width: 1.2rem;
      height: 1.2rem;
    }
  }

  .tip {
    background: #FFF7EB;
    border-radius: .2rem;
    border: 1px solid rgba(241, 131, 29, 0.2);
    padding: .55rem .6rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: .4rem;

    &>img {
      display: block;
      width: .8rem;
      height: .8rem;
      margin-right: .4rem;
    }

    .tipContent {
      // font-family: SF Pro, SF Pro;
      font-weight: 400;
      font-size: .7rem;
      color: #FF9326;
      line-height: 1.1rem;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .bankCardListWapper {
    height: calc(100% - 2.5rem - 2.3rem);
    overflow-y: scroll;
    padding-bottom: 20px;

    .bankCardListContent {
      overflow: hidden;

      .bankCardItem {
        width: 100%;
        height: 6rem;
        position: relative;
        margin-top: .6rem;

        .cardItemBg {
          width: 100%;
          height: 100%;
        }

        .bankCardItemContent {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          padding: .8rem;

          .bankName {
            font-family: SF Pro, SF Pro;
            font-weight: 600;
            font-size: .9rem;
            color: #FFFFFF;
            line-height: 1.3rem;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }

          .bankCardNumAndIsSelected {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 4px;

            .bankCardNum {
              font-family: SF Pro, SF Pro;
              font-weight: 600;
              font-size: 1.2rem;
              color: rgba(255, 255, 255, 0.6);
              line-height: 1.7rem;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .cardIsSelected {
              display: block;
              width: 1.2rem;
              height: 1.2rem;
            }
          }
        }
      }
    }

    .addBankCardArea {
      width: 100%;
      height: 6rem;
      background-color: #F7F7FA;
      border-radius: .4rem;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      margin-top: .6rem;

      &>img {
        display: block;
        width: 1.4rem;
        height: 1.4rem;
        margin-top: .4rem;
      }

      .addDesc {
        font-family: SF Pro, SF Pro;
        font-weight: 400;
        font-size: .8rem;
        color: #626673;
        line-height: 1.2rem;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }

    .bankCardCountTip {
      margin-top: .9rem;
      font-family: SF Pro, SF Pro;
      font-weight: 400;
      font-size: .7rem;
      color: #626673;
      line-height: 1.1rem;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .changeBankCardBtn {
      background-color: #009959;
      border-radius: .3rem;

      font-family: SF Pro, SF Pro;
      font-weight: 600;
      font-size: .9rem;
      color: #FFFFFF;
      line-height: 1.3rem;
      text-align: center;
      font-style: normal;
      text-transform: none;
      padding: .55rem;

      margin-top: 1.6rem;
    }
  }
}
</style>